﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    @*<meta name="viewport" content="width=device-width" />*@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条形码生成</title>
    <script  src="~/layui/lay/jquery-3.4.1.min.js"></script>
    <script src="~/layui/lay/JSBarcode.all.min.js"></script>
    <script type="text/javascript">
        function doPrint() {
            //获取整个打印前页面，作用是打印后恢复。
            bdhtml = window.document.body.innerHTML;
            sprnstr = "<!--startprint-->"; //标记打印区域开始
            eprnstr = "<!--endprint-->";//标记打印区域结束
            //获取要打印的区域, 从标记开始处向下获取。
            prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);//17表示光标右移17个单位
            //删除结束标记后面的内容。
            prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
            //将页面显示要打印的内容。
            window.document.body.innerHTML = prnhtml;
            //打印整个页面
            window.print(prnhtml);
            //恢复打印前的页面
            window.document.body.innerHTML = bdhtml;
        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h3 {
            text-align: center;
            font-size: 16px;
            margin: 10px;
        }

        .box {
            text-align: center;
        }

        #barcode {
            width: 200px;
        }
        *#print{
            margin-left:110px;
            margin-right:110px;
        }
         .cimg{
            float:left; 
            padding-left:17px;
            padding-right:15px;
            margin-top:15px;
        }
         .dx{
             margin-top:300px;
             width:300px;
             height:150px;
         }
        
        /*img{
            float:left;
            margin-left:30px;
            margin-right:30px
        }*/
        /*#BTN{
             float:left;
        }*/
        /* END EXTER*/
    </style>

</head>
<body>
    <div id="OC" style="display:none;">
        <input type="text" id="In" name="In" value="@ViewBag.In" />
        <input type="text" id="In2" name="In2" value="@ViewBag.In2" />
        <button id="a" name="a" onclick="OOCC()">获取</button>
    </div>
    <!--startprint-->
    <!--注意要加上html里star和end的这两个标记-->
    @*<h3 id="h"></h3>*@
    <div id="print" class="box WordSection1"  style='width:1000px;margin:0 auto;text-align:center;vertical-align: middle;'>
        <img id="barcode-0" />
    </div>
    <!--endprint-->
    <div style="display:none; text-align:center" id="BTN">
        <button id='C' name='button_print' onclick="doPrint()" style='width:70px;margin:0 auto;height:20px;' hidden></button>
        <input id="num" type="text" placeholder="打印几份?" size="8" maxlength="4" value="1" />
    </div>
    <div style="text-align:center">
        <button id="W" onclick="myFunction()" style='width:70px;margin:0 auto;height:20px;'>打印</button>
    </div>
</body>
</html>
<style type="text/css">
   
</style>
<script>

        //$('img').addClass('float:left;');
        //var C = document.getElementById("C");
        //var W = document.getElementById("W");
    function myFunction() {//点击W按钮 循环In2中数值大小赋值一维码然后调用C的doPrint实现重复打印
        //var img = document.getElementsByTagName('img');
        //$('div').addClass('cimg');
        $('img').addClass('dx');
        //$('button').addClass('cimg');
        //$('input').addClass('cimg');
            var x = "";
            for (var i = 1; i < document.getElementById("num").value; i++) {
                var sourceNode = document.getElementById("barcode-0"); // 获得被克隆的节点对象
                var clonedNode = sourceNode.cloneNode(true); // 克隆节点
                clonedNode.setAttribute("id", "barcode-" + i); // 修改一下id 值，避免id 重复
                x = sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
            }
            C.onclick();
            window.location.href = window.location.href;
            window.location.reload //以上两行为点击w刷新页面
        }
        var i =1;

        //var G = document.getElementById('in').value;
        var barcode = document.getElementById('barcode-0'),
        str = document.getElementById("In").value;
        options = {
            format: "CODE128",//使用的条形码类型
            displayValue: true,//设置是否显示条形码之后的数字
            fontSize: 18,
            height: 100,//高度
            //margin: 15,

        };
        JsBarcode(barcode, str, options); //原生
        //  $('#barcode').JsBarcode(string, options); //jQuery
        function printit(){  //打印方法
            prnhtml = $("#print").html();
            window.document.body.innerHTML = prnhtml;
            window.print();
            console.log(1);
        }
        function printpage() {
            window.print()
        }
        document.getElementById("h").innerText = document.getElementById("In2").value
</script>